/**
 * FixedBtnPlugin module
 */

import React, {Component} from 'react';
class FixedBtnPlugin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open_event_list: 0
        };
        this.handleOnOpenWidgetEvent = this.handleOnOpenWidgetEvent.bind(this)
    }
    handleOnOpenWidgetEvent() {
        this.setState({
            open_event_list: !this.state.open_event_list
        });
    }
    addWidget(...btn){
        debugger;
        this.handleOnOpenWidgetEvent();
        const {handleOnAddWidget} = this.props
        handleOnAddWidget(btn)
    }
    render() {
        const fixedBtn = this.props.FIXED_BUTTONS.map(function(fixed) {
            var WidgetEventNode = "";
            WidgetEventNode = <div className='widget_event'>
                <button className="btn-eidt-widget-event" onBlur={this.addAnBtnBlur}>
                    <img src="/static/idealsee/images/new_editor/editor/icon_addfloating.png?v=f2b78"/>
                    <span>{$._('Fixed Button')}</span>
                </button>
                <div className='select-widget-event' style={{
                    display: this.state.open_event_list
                        ? "block"
                        : "none"
                }}>
                    <div className='select-evtype'>
                        <div className='select' required='required'>
                            {
                                this.props.WIDGET_EVENTS.map((widgetEvent) =>{
                                    return (
                                        <div key={widgetEvent.value} className="option" name={widgetEvent.value} onClick={this.addWidget.bind(this, widgetEvent.value)}>{widgetEvent.name}</div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
            return (
                <div key={fixed.type_display}>
                    <div key={fixed.type} className='addfloatingbtns' onClick={this.handleOnOpenWidgetEvent}>
                        <div data-draggable className="widget-type-drag ui-draggable" data-widget-type-click datatype={fixed.type}>{WidgetEventNode}</div>
                    </div>
                </div>
            )
        }.bind(this));
        return (
            <div className='floatingbtns'>
                {fixedBtn}
            </div>
        )
    }
}
FixedBtnPlugin.defaultProps = {
    FIXED_BUTTONS: [{
        icon: 1,
        type: 19,
        width: 50,
        height: 50,
        radius: "25",
        start_time: 0,
        color: "f76b1c",
        name: "floatingbtn",
        type_display: $._('Fixed Button'),
        icon_class: "icon-floating"
    }],
    WIDGET_EVENTS: [
        {
            value: 0,
            name: $._("Make a call")
        }, {
            value: 1,
            name: $._('Visit a web link')
        }, {
            value: 2,
            name: $._('navigation position')
        }, {
            value: 3,
            name: $._("View expand introduction")
        }, {
            value: 11,
            name: $._("Trigger")
        }, {
            value: 14,
            name: $._("Play Video")
        }, {
            value: 15,
            name: $._("Page skip")
        }, {
            value: 17,
            name: $._("Change model map")
        }, {
            value: 18,
            name: $._("Play model action")
        }, {
            value: 21,
            name: "附近搜索"
        }, {
            value: 22,
            name: $._('submit form')
        }
    ]
}
export default FixedBtnPlugin;
